import * as React from 'react'
import { List, Card } from 'antd'
import './index.css'
export interface IListItem {
  id: number
  date: string
  content: string
}

interface IState {
  dataSource: IListItem[]
}

interface IProps {
  data: IListItem[]
  finishData: IListItem[]
  showModal: (id: number) => void
}
class ListComponent extends React.PureComponent<IProps, IState> {
  constructor(props: IProps) {
    super(props)
  }
  readonly state: IState = {
    dataSource: []
  }
  public render() {
    console.log('list渲染')
    const { data, finishData } = this.props
    return (
      <div className="todo_list">
        <div className="todo_list_left">
          <h2>未完成待办事项( {data.length} )</h2>
          <List
            grid={{ gutter: 16, column: 2 }}
            // dataSource={this.props.data}
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Card onClick={() => this.props.showModal(item.id)}>
                  <div>{item.content}</div>
                  <div>{item.date}</div>
                </Card>
              </List.Item>
            )}
          />
        </div>
        <div className="todo_list_right">
          <h2>已完成待办事项({finishData.length})</h2>
          <List
            grid={{ gutter: 16, column: 2 }}
            dataSource={finishData}
            renderItem={item => (
              <List.Item>
                <Card>
                  <div>{item.content}</div>
                  <div>{item.date}</div>
                </Card>
              </List.Item>
            )}
          />
        </div>
      </div>
    )
  }
}

export default ListComponent
